<template>
  <div class="big">
    <div class="banner">
      <van-swipe :autoplay="3000" :width="173" :height="210">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="interval">
      <div class="bottom" v-for="(v, index) in arr1" :key="index" @click="fun(index)">
        <p class="txt">{{ v }}</p>
        <div class="two">
          <div class="left" v-for="(img, index) in arr" :key="index">
            <img :src="img.pic" alt="" />
            <p class="price">￥{{ img.price }}</p>
          </div>
          <!-- <div class="right">
                        <img src="https://pic.cdfgsanya.com/assets/upload/product/39714c6e26af68c2fc3ce0cb0fa013e2_400x400.jpg" alt="">
                        <p>￥1299</p>
                      </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import service from "../../../../src/utils/service";
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [],
      arr: [],
      arr1: ["限时秒杀", "超值闪购"],
    };
  },
  mounted() {
    service({
      url: "  http://localhost:3000/banner",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        console.log(element);
        this.images.push(element.img);
      });
    });

    service({
      url: "  http://localhost:3000/seckill",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        console.log(element);
        this.arr.push(element);
      });
    });
  },
  methods:{
    fun(index){
      if(index==0){
 this.$router.push("/ms");
      }
    }
  }
};
</script>
  
  <style>
.big {
  display: flex;
  background-color: #f8f6f6;
}

.banner {
  width: 173px;
  height: 219px;
  margin: 10px;
  border-radius: 10px 20px;
}
.van-swipe-item img {
  width: 173px;
  height: 210px;
}
.interval {
  width: 173px;
  height: 210px;
  margin: 10px;
  border-radius: 10px;
  background-color: #fff;
  border-radius: 10px;
}
/* .interval .top {
      height: 104px;
    }
    .interval .top p {
      background-color: #fdedee;
      font-size: 14px
    };
    .interval .bottom p {
      background-color: #fdedee
    };
    .interval .top .one {
      display: flex;
    }
    .interval .top .one .left {
      width: 50%;
      display: flex;
    }
    .interval .top .one .left img {
      width: 52px;
      height: 52px;
    }
    .interval .top .one .right {
      width: 50%;
      display: flex;
    }
    .interval .top .one .right img {
      width: 52px;
      height: 52px;
    } */
.interval .bottom {
  border-radius: 10%;
}
.interval .bottom .two {
  display: flex;
}
.interval .bottom .two .left img {
  width: 52px;
  height: 52px;
}
.interval .bottom .two div {
  margin: 0 20px 0 10px;
}
.interval .bottom .two .left .price {
  font-size: 14px;
}
.interval .bottom .txt {
  background-color: #fbdde0;
  background-image: linear-gradient(#fbdde0, #fff);
}
</style>